<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Ext.grid.EditorGrid</title>
        <link rel="stylesheet" type="text/css" href="../resources/reset.css"/>
        <link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="../resources/print.css" media="print">
        <!-- GC -->
    </head>
    <body>
            <div class="body-wrap">
        <div class="top-tools">
        	<img src="../resources/print.gif" width="16" height="16" align="absmiddle">&nbsp;<a href="Ext.grid.EditorGrid.html" target="_blank">Print Friendly</a><br/>

        </div>
        <h1>Class Ext.grid.EditorGrid</h1>
        <table cellspacing="0">
            <tr><td class="label">Package:</td><td>Ext.grid</td></tr>
            <tr><td class="label">Class:</td><td>EditorGrid</td></tr>
                        <tr><td class="label">Extends:</td><td><a ext:cls="Ext.grid.Grid" ext:member="" href="Ext.grid.Grid.html">Grid</a></td></tr>
                                    <tr><td class="label">Defined In:</td><td><a href="EditorGrid.jss.html">EditorGrid.js</a></td></tr>
        </table>
        <div class="description">
            Class for creating and editable grid.        </div>
        <br />
        	<a href="#properties">Properties</a>
			&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#methods">Methods</a>
			&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#events">Events</a>
        	        	&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#configs">Config Options</a>
        	        <hr />
        <a name="properties"></a>
        <h2>Public Properties</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Property</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class=" inherited" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#ddText">ddText</a> : String</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#ddText" href="Ext.grid.Grid.html#ddText">Grid</a></td>
    </tr>
    <tr class=" inherited" expandable>
        <td class="mdesc">Configures the text is the drag proxy (defaults to "%0 selected row(s)").
%0 is replaced with the number of selected ...</td>
    </tr>
            </table>
                <a name="methods"></a>
        <h2>Public Methods</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Method</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#addEvents">addEvents</a>(&nbsp;<code>Object object</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="Ext.util.Observable.html#addEvents">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Used to define events on this Observable</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#addListener">addListener</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#addListener" href="Ext.util.Observable.html#addListener">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Appends an event handler to this component</td>
    </tr>
        <tr class=" inherited" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#autoSize">autoSize</a>() : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#autoSize" href="Ext.grid.Grid.html#autoSize">Grid</a></td>
    </tr>
    <tr class=" inherited" expandable>
        <td class="mdesc">Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
but if manual update is...</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#destroy">destroy</a>(&nbsp;<code>Boolean removeEl</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#destroy" href="Ext.grid.Grid.html#destroy">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Destroy this grid.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#fireEvent">fireEvent</a>(&nbsp;<code>String eventName</code>, <code>Object... args</code>&nbsp;) : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="Ext.util.Observable.html#fireEvent">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires the specified event with the passed parameters (minus the event name).</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getColumnModel">getColumnModel</a>() : ColumnModel</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#getColumnModel" href="Ext.grid.Grid.html#getColumnModel">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Returns the grid's ColumnModel.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getDataSource">getDataSource</a>() : DataSource</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#getDataSource" href="Ext.grid.Grid.html#getDataSource">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Returns the grid's DataSource.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getDragDropText">getDragDropText</a>() : String</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#getDragDropText" href="Ext.grid.Grid.html#getDragDropText">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Called to get grid's drag proxy text, by default returns this.ddText.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getGridEl">getGridEl</a>() : Element</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#getGridEl" href="Ext.grid.Grid.html#getGridEl">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Returns the grid's underlying element.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getSelectionModel">getSelectionModel</a>() : SelectionModel</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#getSelectionModel" href="Ext.grid.Grid.html#getSelectionModel">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Returns the grid's SelectionModel.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getView">getView</a>() : GridView</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#getView" href="Ext.grid.Grid.html#getView">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Returns the grid's GridView object.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#hasListener">hasListener</a>(&nbsp;<code>String eventName</code>&nbsp;) : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="Ext.util.Observable.html#hasListener">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Checks to see if this object has any listeners for a specified event</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#on">on</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#on" href="Ext.util.Observable.html#on">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Appends an event handler to this element (shorthand for addListener)</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#purgeListeners">purgeListeners</a>() : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="Ext.util.Observable.html#purgeListeners">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Removes all listeners for this object</td>
    </tr>
        <tr class=" inherited" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#reconfigure">reconfigure</a>(&nbsp;<code>Ext.data.Store dataSource</code>, <code>Ext.grid.ColumnModel The</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#reconfigure" href="Ext.grid.Grid.html#reconfigure">Grid</a></td>
    </tr>
    <tr class=" inherited" expandable>
        <td class="mdesc">Reconfigures the grid to use a different Store and Column Model.
The View will be bound to the new objects and refres...</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#removeListener">removeListener</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="Ext.util.Observable.html#removeListener">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Removes a listener</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#render">render</a>() : Ext.grid.Grid</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#render" href="Ext.grid.Grid.html#render">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">
Called once after all setup has been completed and the grid is ready to be rendered.</td>
    </tr>
        <tr class=" alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#startEditing">startEditing</a>(&nbsp;<code>Number rowIndex</code>, <code>Number colIndex</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2">EditorGrid</td>
    </tr>
    <tr class=" alt">
        <td class="mdesc">Starts editing the specified for the specified row/column</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#stopEditing">stopEditing</a>() : void</td>
        <td class="msource" rowspan="2">EditorGrid</td>
    </tr>
    <tr class="">
        <td class="mdesc">Stops any active editing</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#un">un</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#un" href="Ext.util.Observable.html#un">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Removes a listener (shorthand for removeListener)</td>
    </tr>
            </table>
                <a name="events"></a>
        <h2>Public Events</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Event</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-afteredit">afteredit</a> : (&nbsp;<code>Object e</code>&nbsp;)</td>
        <td class="msource" rowspan="2">EditorGrid</td>
    </tr>
    <tr class="" expandable>
        <td class="mdesc">Fires after a cell is edited. 

grid - This grid
record - The record being edited
field - The field name being edited...</td>
    </tr>
        <tr class=" alt" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-beforeedit">beforeedit</a> : (&nbsp;<code>Object e</code>&nbsp;)</td>
        <td class="msource" rowspan="2">EditorGrid</td>
    </tr>
    <tr class=" alt" expandable>
        <td class="mdesc">Fires before cell editing is triggered. The edit event object has the following properties 

grid - This grid
record ...</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-bodyscroll">bodyscroll</a> : (&nbsp;<code>Number scrollLeft</code>, <code>Number scrollTop</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-bodyscroll" href="Ext.grid.Grid.html#event-bodyscroll">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when the body element is scrolled</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-cellclick">cellclick</a> : (&nbsp;<code>Grid this</code>, <code>Number rowIndex</code>, <code>Number columnIndex</code>, <code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-cellclick" href="Ext.grid.Grid.html#event-cellclick">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when a cell is clicked</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-cellcontextmenu">cellcontextmenu</a> : (&nbsp;<code>Grid this</code>, <code>Number rowIndex</code>, <code>Number cellIndex</code>, <code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-cellcontextmenu" href="Ext.grid.Grid.html#event-cellcontextmenu">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when a cell is right clicked</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-celldblclick">celldblclick</a> : (&nbsp;<code>Grid this</code>, <code>Number rowIndex</code>, <code>Number columnIndex</code>, <code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-celldblclick" href="Ext.grid.Grid.html#event-celldblclick">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when a cell is double clicked</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-click">click</a> : (&nbsp;<code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-click" href="Ext.grid.Grid.html#event-click">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">The raw click event for the entire grid.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-columnmove">columnmove</a> : (&nbsp;<code>Number oldIndex</code>, <code>Number newIndex</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-columnmove" href="Ext.grid.Grid.html#event-columnmove">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when the user moves a column</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-columnresize">columnresize</a> : (&nbsp;<code>Number columnIndex</code>, <code>Number newSize</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-columnresize" href="Ext.grid.Grid.html#event-columnresize">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when the user resizes a column</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-contextmenu">contextmenu</a> : (&nbsp;<code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-contextmenu" href="Ext.grid.Grid.html#event-contextmenu">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">The raw contextmenu event for the entire grid.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-dblclick">dblclick</a> : (&nbsp;<code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-dblclick" href="Ext.grid.Grid.html#event-dblclick">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">The raw dblclick event for the entire grid.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-dragdrop">dragdrop</a> : (&nbsp;<code>Grid this</code>, <code>Ext.GridDD dd</code>, <code>String targetId</code>, <code>event e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-dragdrop" href="Ext.grid.Grid.html#event-dragdrop">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when dragged row(s) are dropped on a valid DD target</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-dragenter">dragenter</a> : (&nbsp;<code>Grid this</code>, <code>Ext.GridDD dd</code>, <code>String targetId</code>, <code>event e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-dragenter" href="Ext.grid.Grid.html#event-dragenter">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when the dragged row(s) first cross another DD target while being dragged</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-dragout">dragout</a> : (&nbsp;<code>Grid this</code>, <code>Ext.GridDD dd</code>, <code>String targetId</code>, <code>event e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-dragout" href="Ext.grid.Grid.html#event-dragout">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when the dragged row(s) leave another DD target while being dragged</td>
    </tr>
        <tr class=" inherited" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-dragover">dragover</a> : (&nbsp;<code>Grid this</code>, <code>Ext.GridDD dd</code>, <code>String targetId</code>, <code>event e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-dragover" href="Ext.grid.Grid.html#event-dragover">Grid</a></td>
    </tr>
    <tr class=" inherited" expandable>
        <td class="mdesc">Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dr...</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-enddrag">enddrag</a> : (&nbsp;<code>Grid this</code>, <code>Ext.GridDD dd</code>, <code>event e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-enddrag" href="Ext.grid.Grid.html#event-enddrag">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when a drag operation is complete</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-headerclick">headerclick</a> : (&nbsp;<code>Grid this</code>, <code>Number columnIndex</code>, <code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-headerclick" href="Ext.grid.Grid.html#event-headerclick">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when a header is clicked</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-headercontextmenu">headercontextmenu</a> : (&nbsp;<code>Grid this</code>, <code>Number columnIndex</code>, <code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-headercontextmenu" href="Ext.grid.Grid.html#event-headercontextmenu">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when a header is right clicked</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-headerdblclick">headerdblclick</a> : (&nbsp;<code>Grid this</code>, <code>Number columnIndex</code>, <code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-headerdblclick" href="Ext.grid.Grid.html#event-headerdblclick">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when a header cell is double clicked</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-keydown">keydown</a> : (&nbsp;<code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-keydown" href="Ext.grid.Grid.html#event-keydown">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">The raw keydown event for the entire grid.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-keypress">keypress</a> : (&nbsp;<code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-keypress" href="Ext.grid.Grid.html#event-keypress">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">The raw keypress event for the entire grid.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-mousedown">mousedown</a> : (&nbsp;<code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-mousedown" href="Ext.grid.Grid.html#event-mousedown">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">The raw mousedown event for the entire grid.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-mouseout">mouseout</a> : (&nbsp;<code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-mouseout" href="Ext.grid.Grid.html#event-mouseout">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">The raw mouseout event for the entire grid.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-mouseover">mouseover</a> : (&nbsp;<code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-mouseover" href="Ext.grid.Grid.html#event-mouseover">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">The raw mouseover event for the entire grid.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-mouseup">mouseup</a> : (&nbsp;<code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-mouseup" href="Ext.grid.Grid.html#event-mouseup">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">The raw mouseup event for the entire grid.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-render">render</a> : (&nbsp;<code>Grid grid</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-render" href="Ext.grid.Grid.html#event-render">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when the grid is rendered</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-rowclick">rowclick</a> : (&nbsp;<code>Grid this</code>, <code>Number rowIndex</code>, <code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-rowclick" href="Ext.grid.Grid.html#event-rowclick">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when a row is clicked</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-rowcontextmenu">rowcontextmenu</a> : (&nbsp;<code>Grid this</code>, <code>Number rowIndex</code>, <code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-rowcontextmenu" href="Ext.grid.Grid.html#event-rowcontextmenu">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when a row is right clicked</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-rowdblclick">rowdblclick</a> : (&nbsp;<code>Grid this</code>, <code>Number rowIndex</code>, <code>Ext.EventObject e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-rowdblclick" href="Ext.grid.Grid.html#event-rowdblclick">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when a row is double clicked</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-startdrag">startdrag</a> : (&nbsp;<code>Grid this</code>, <code>Ext.GridDD dd</code>, <code>event e</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#event-startdrag" href="Ext.grid.Grid.html#event-startdrag">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when row(s) start being dragged</td>
    </tr>
        <tr class="" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-validateedit">validateedit</a> : (&nbsp;<code>Object e</code>&nbsp;)</td>
        <td class="msource" rowspan="2">EditorGrid</td>
    </tr>
    <tr class="" expandable>
        <td class="mdesc">Fires after a cell is edited, but before the value is set in the record. Return false
to cancel the change. The edit ...</td>
    </tr>
            </table>
                        <a name="configs"></a>
        <h2>Config Options</h2>
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Config Options</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-autoExpandColumn">autoExpandColumn</a> : String</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#autoExpandColumn" href="Ext.grid.Grid.html#autoExpandColumn">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">The id of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-autoExpandMax">autoExpandMax</a> : Number</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#autoExpandMax" href="Ext.grid.Grid.html#autoExpandMax">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">The maximum width the autoExpandColumn can have (if enabled). Default is 1000.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-autoExpandMin">autoExpandMin</a> : Number</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#autoExpandMin" href="Ext.grid.Grid.html#autoExpandMin">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">The minimum width the autoExpandColumn can have (if enabled). Default is 50.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-autoHeight">autoHeight</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#autoHeight" href="Ext.grid.Grid.html#autoHeight">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">True to fit the height of the grid container to the height of the data. Default is false.</td>
    </tr>
        <tr class=" inherited" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-autoSizeColumns">autoSizeColumns</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#autoSizeColumns" href="Ext.grid.Grid.html#autoSizeColumns">Grid</a></td>
    </tr>
    <tr class=" inherited" expandable>
        <td class="mdesc">True to automatically resize the columns to fit their content on initial render. It is more efficient to explicitly s...</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-autoSizeHeaders">autoSizeHeaders</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#autoSizeHeaders" href="Ext.grid.Grid.html#autoSizeHeaders">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">True to measure headers with column data when auto sizing columns. Default is true.</td>
    </tr>
        <tr class=" inherited" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-autoWidth">autoWidth</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#autoWidth" href="Ext.grid.Grid.html#autoWidth">Grid</a></td>
    </tr>
    <tr class=" inherited" expandable>
        <td class="mdesc">True to set the grid's width to the default total width of the grid's columns instead of a fixed width. Default is fa...</td>
    </tr>
        <tr class=" alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-clicksToEdit">clicksToEdit</a> : Number</td>
        <td class="msource" rowspan="2">EditorGrid</td>
    </tr>
    <tr class=" alt">
        <td class="mdesc">The number of clicks on a cell required to display the cell's editor (defaults to 2)</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-enableColumnHide">enableColumnHide</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#enableColumnHide" href="Ext.grid.Grid.html#enableColumnHide">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">True to enable hiding of columns with the header context menu. Default is true.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-enableColumnMove">enableColumnMove</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#enableColumnMove" href="Ext.grid.Grid.html#enableColumnMove">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">True to enable drag and drop reorder of columns. Default is true.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-enableDragDrop">enableDragDrop</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#enableDragDrop" href="Ext.grid.Grid.html#enableDragDrop">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">True to enable drag and drop of rows. Default is false.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-enableRowHeightSync">enableRowHeightSync</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#enableRowHeightSync" href="Ext.grid.Grid.html#enableRowHeightSync">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">True to manually sync row heights across locked and not locked rows. Default is false.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-loadMask">loadMask</a> : Object</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#loadMask" href="Ext.grid.Grid.html#loadMask">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">An <a ext:cls="Ext.LoadMask" href="Ext.LoadMask.html">Ext.LoadMask</a> config or true to mask the grid while loading. Default is false.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-maxHeight">maxHeight</a> : Number</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#maxHeight" href="Ext.grid.Grid.html#maxHeight">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Sets the maximum height of the grid - ignored if autoHeight is not on.</td>
    </tr>
        <tr class=" inherited" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-maxRowsToMeasure">maxRowsToMeasure</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#maxRowsToMeasure" href="Ext.grid.Grid.html#maxRowsToMeasure">Grid</a></td>
    </tr>
    <tr class=" inherited" expandable>
        <td class="mdesc">If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of rows measured to get a columns size. De...</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-minColumnWidth">minColumnWidth</a> : Number</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#minColumnWidth" href="Ext.grid.Grid.html#minColumnWidth">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">The minimum width a column can be resized to. Default is 25.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-monitorWindowResize">monitorWindowResize</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#monitorWindowResize" href="Ext.grid.Grid.html#monitorWindowResize">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">True to autoSize the grid when the window resizes. Default is true.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-stripeRows">stripeRows</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#stripeRows" href="Ext.grid.Grid.html#stripeRows">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">True to stripe the rows. Default is true.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-trackMouseOver">trackMouseOver</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#trackMouseOver" href="Ext.grid.Grid.html#trackMouseOver">Grid</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">True to highlight rows when the mouse is over. Default is true.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#config-view">view</a> : Object</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.grid.Grid" ext:member="#view" href="Ext.grid.Grid.html#view">Grid</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">The <a ext:cls="Ext.grid.GridView" href="Ext.grid.GridView.html">Ext.grid.GridView</a> used by the grid. This can be set before a call to render().</td>
    </tr>
            </table>
                            <h2 class="mdetail-head">Property Details</h2>
            <div class="detail-wrap">
                            <a name="ddText"></a>
                <div class="mdetail">
                <h3>ddText</i></h3>
                <code>public String ddText</code>
                <div class="mdetail-desc">
                    Configures the text is the drag proxy (defaults to "%0 selected row(s)").
%0 is replaced with the number of selected rows.                </div>
                <div class="mdetail-def">This property is defined by <a ext:cls="Ext.grid.Grid" ext:member="#ddText" href="Ext.grid.Grid.html#ddText">Grid</a>.</div>
                </div>
                        </div>
        
        
                    <h2 class="mdetail-head">Method Details</h2>
            <div class="detail-wrap">
                            <a name="addEvents"></a>
                <div class="mdetail">
                <h3>addEvents</i></h3>
                <code>public function addEvents(&nbsp;<code>Object object</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Used to define events on this Observable
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>object</code> : Object<div class="sub-desc">The object with the events defined</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="Ext.util.Observable.html#addEvents">Observable</a>.</div>
                </div>
                            <a name="addListener"></a>
                <div class="mdetail alt">
                <h3>addListener</i></h3>
                <code>public function addListener(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Appends an event handler to this component
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handler
function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration
properties. This may contain any of the following properties:<ul>
<li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
<li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
<li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
<li>buffer {Number} Causes the handler to be scheduled to run in an <a ext:cls="Ext.util.DelayedTask" href="Ext.util.DelayedTask.html">Ext.util.DelayedTask</a> delayed
by the specified number of milliseconds. If the event fires again within that time, the original
handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
</ul><br>
<p>
<b>Combining Options</b><br>
Using the options argument, it is possible to combine different types of listeners:<br>
<br>
A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
		<pre><code>el.on(<em>'click'</em>, <b>this</b>.onClick, <b>this</b>, {
 			single: true,
    		delay: 100,
    		forumId: 4
		});</code></pre>
<p>
<b>Attaching multiple handlers in 1 call</b><br>
The method also allows for a single argument to be passed which is a config object containing properties
which specify multiple handlers.
<pre><code>el.on({
			<em>'click'</em>: {
        		fn: <b>this</b>.onClick,
        		scope: <b>this</b>,
        		delay: 100
    		}, 
    		<em>'mouseover'</em>: {
        		fn: <b>this</b>.onMouseOver,
        		scope: <b>this</b>
    		},
    		<em>'mouseout'</em>: {
        		fn: <b>this</b>.onMouseOut,
        		scope: <b>this</b>
    		}
		});</code></pre>
<p>
Or a shorthand syntax which passes the same scope object to all handlers:
 	<pre><code>el.on({
			<em>'click'</em>: <b>this</b>.onClick,
    		<em>'mouseover'</em>: <b>this</b>.onMouseOver,
    		<em>'mouseout'</em>: <b>this</b>.onMouseOut,
    		scope: <b>this</b>
		});</code></pre></div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#addListener" href="Ext.util.Observable.html#addListener">Observable</a>.</div>
                </div>
                            <a name="autoSize"></a>
                <div class="mdetail">
                <h3>autoSize</i></h3>
                <code>public function autoSize()</code>
                <div class="mdetail-desc">
                    Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
but if manual update is required this method will initiate it.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#autoSize" href="Ext.grid.Grid.html#autoSize">Grid</a>.</div>
                </div>
                            <a name="destroy"></a>
                <div class="mdetail alt">
                <h3>destroy</i></h3>
                <code>public function destroy(&nbsp;<code>Boolean removeEl</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Destroy this grid.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>removeEl</code> : Boolean<div class="sub-desc">True to remove the element</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#destroy" href="Ext.grid.Grid.html#destroy">Grid</a>.</div>
                </div>
                            <a name="fireEvent"></a>
                <div class="mdetail">
                <h3>fireEvent</i></h3>
                <code>public function fireEvent(&nbsp;<code>String eventName</code>, <code>Object... args</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Fires the specified event with the passed parameters (minus the event name).
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc"></div></li><li><code>args</code> : Object...<div class="sub-desc">Variable number of parameters are passed to handlers</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Boolean</code><div class="sub-desc">returns false if any of the handlers return false otherwise it returns true</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="Ext.util.Observable.html#fireEvent">Observable</a>.</div>
                </div>
                            <a name="getColumnModel"></a>
                <div class="mdetail alt">
                <h3>getColumnModel</i></h3>
                <code>public function getColumnModel()</code>
                <div class="mdetail-desc">
                    Returns the grid's ColumnModel.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>ColumnModel</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#getColumnModel" href="Ext.grid.Grid.html#getColumnModel">Grid</a>.</div>
                </div>
                            <a name="getDataSource"></a>
                <div class="mdetail">
                <h3>getDataSource</i></h3>
                <code>public function getDataSource()</code>
                <div class="mdetail-desc">
                    Returns the grid's DataSource.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>DataSource</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#getDataSource" href="Ext.grid.Grid.html#getDataSource">Grid</a>.</div>
                </div>
                            <a name="getDragDropText"></a>
                <div class="mdetail alt">
                <h3>getDragDropText</i></h3>
                <code>public function getDragDropText()</code>
                <div class="mdetail-desc">
                    Called to get grid's drag proxy text, by default returns this.ddText.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>String</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#getDragDropText" href="Ext.grid.Grid.html#getDragDropText">Grid</a>.</div>
                </div>
                            <a name="getGridEl"></a>
                <div class="mdetail">
                <h3>getGridEl</i></h3>
                <code>public function getGridEl()</code>
                <div class="mdetail-desc">
                    Returns the grid's underlying element.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Element</code><div class="sub-desc">The element</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#getGridEl" href="Ext.grid.Grid.html#getGridEl">Grid</a>.</div>
                </div>
                            <a name="getSelectionModel"></a>
                <div class="mdetail alt">
                <h3>getSelectionModel</i></h3>
                <code>public function getSelectionModel()</code>
                <div class="mdetail-desc">
                    Returns the grid's SelectionModel.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>SelectionModel</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#getSelectionModel" href="Ext.grid.Grid.html#getSelectionModel">Grid</a>.</div>
                </div>
                            <a name="getView"></a>
                <div class="mdetail">
                <h3>getView</i></h3>
                <code>public function getView()</code>
                <div class="mdetail-desc">
                    Returns the grid's GridView object.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>GridView</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#getView" href="Ext.grid.Grid.html#getView">Grid</a>.</div>
                </div>
                            <a name="hasListener"></a>
                <div class="mdetail alt">
                <h3>hasListener</i></h3>
                <code>public function hasListener(&nbsp;<code>String eventName</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Checks to see if this object has any listeners for a specified event
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to check for</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Boolean</code><div class="sub-desc">True if the event is being listened for, else false</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="Ext.util.Observable.html#hasListener">Observable</a>.</div>
                </div>
                            <a name="on"></a>
                <div class="mdetail">
                <h3>on</i></h3>
                <code>public function on(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Appends an event handler to this element (shorthand for addListener)
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handler
function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional)</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#on" href="Ext.util.Observable.html#on">Observable</a>.</div>
                </div>
                            <a name="purgeListeners"></a>
                <div class="mdetail alt">
                <h3>purgeListeners</i></h3>
                <code>public function purgeListeners()</code>
                <div class="mdetail-desc">
                    Removes all listeners for this object
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="Ext.util.Observable.html#purgeListeners">Observable</a>.</div>
                </div>
                            <a name="reconfigure"></a>
                <div class="mdetail">
                <h3>reconfigure</i></h3>
                <code>public function reconfigure(&nbsp;<code>Ext.data.Store dataSource</code>, <code>Ext.grid.ColumnModel The</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Reconfigures the grid to use a different Store and Column Model.
The View will be bound to the new objects and refreshed.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>dataSource</code> : Ext.data.Store<div class="sub-desc">The new <a ext:cls="Ext.data.Store" href="Ext.data.Store.html">Ext.data.Store</a> object</div></li><li><code>The</code> : Ext.grid.ColumnModel<div class="sub-desc">new <a ext:cls="Ext.grid.ColumnModel" href="Ext.grid.ColumnModel.html">Ext.grid.ColumnModel</a> object</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#reconfigure" href="Ext.grid.Grid.html#reconfigure">Grid</a>.</div>
                </div>
                            <a name="removeListener"></a>
                <div class="mdetail alt">
                <h3>removeListener</i></h3>
                <code>public function removeListener(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Removes a listener
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="Ext.util.Observable.html#removeListener">Observable</a>.</div>
                </div>
                            <a name="render"></a>
                <div class="mdetail">
                <h3>render</i></h3>
                <code>public function render()</code>
                <div class="mdetail-desc">
                    
Called once after all setup has been completed and the grid is ready to be rendered.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.grid.Grid</code><div class="sub-desc">this</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.grid.Grid" ext:member="#render" href="Ext.grid.Grid.html#render">Grid</a>.</div>
                </div>
                            <a name="startEditing"></a>
                <div class="mdetail alt">
                <h3>startEditing</i></h3>
                <code>public function startEditing(&nbsp;<code>Number rowIndex</code>, <code>Number colIndex</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Starts editing the specified for the specified row/column
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>rowIndex</code> : Number<div class="sub-desc"></div></li><li><code>colIndex</code> : Number<div class="sub-desc"></div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by EditorGrid.</div>
                </div>
                            <a name="stopEditing"></a>
                <div class="mdetail">
                <h3>stopEditing</i></h3>
                <code>public function stopEditing()</code>
                <div class="mdetail-desc">
                    Stops any active editing
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by EditorGrid.</div>
                </div>
                            <a name="un"></a>
                <div class="mdetail alt">
                <h3>un</i></h3>
                <code>public function un(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Removes a listener (shorthand for removeListener)
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#un" href="Ext.util.Observable.html#un">Observable</a>.</div>
                </div>
                        </div>
        
                    <h2 class="mdetail-head">Event Details</h2>
            <div class="detail-wrap">
                            <a name="event-afteredit"></a>
                <div class="mdetail">
                <h3>afteredit</i></h3>
                <code>public event afteredit</code>
                <div class="mdetail-desc">
                Fires after a cell is edited. <br />
<ul style="padding:5px;padding-left:16px;">
<li>grid - This grid</li>
<li>record - The record being edited</li>
<li>field - The field name being edited</li>
<li>value - The value being set</li>
<li>originalValue - The original value for the field, before the edit.</li>
<li>row - The grid row index</li>
<li>column - The grid column index</li>
</ul>
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Object<div class="sub-desc">An edit event (see above for description)</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by EditorGrid.</div>
                </div>
                            <a name="event-beforeedit"></a>
                <div class="mdetail alt">
                <h3>beforeedit</i></h3>
                <code>public event beforeedit</code>
                <div class="mdetail-desc">
                Fires before cell editing is triggered. The edit event object has the following properties <br />
<ul style="padding:5px;padding-left:16px;">
<li>grid - This grid</li>
<li>record - The record being edited</li>
<li>field - The field name being edited</li>
<li>value - The value for the field being edited.</li>
<li>row - The grid row index</li>
<li>column - The grid column index</li>
<li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
</ul>
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Object<div class="sub-desc">An edit event (see above for description)</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by EditorGrid.</div>
                </div>
                            <a name="event-bodyscroll"></a>
                <div class="mdetail">
                <h3>bodyscroll</i></h3>
                <code>public event bodyscroll</code>
                <div class="mdetail-desc">
                Fires when the body element is scrolled
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>scrollLeft</code> : Number<div class="sub-desc"></div></li><li><code>scrollTop</code> : Number<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-bodyscroll" href="Ext.grid.Grid.html#event-bodyscroll">Grid</a>.</div>
                </div>
                            <a name="event-cellclick"></a>
                <div class="mdetail alt">
                <h3>cellclick</i></h3>
                <code>public event cellclick</code>
                <div class="mdetail-desc">
                Fires when a cell is clicked
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc"></div></li><li><code>columnIndex</code> : Number<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-cellclick" href="Ext.grid.Grid.html#event-cellclick">Grid</a>.</div>
                </div>
                            <a name="event-cellcontextmenu"></a>
                <div class="mdetail">
                <h3>cellcontextmenu</i></h3>
                <code>public event cellcontextmenu</code>
                <div class="mdetail-desc">
                Fires when a cell is right clicked
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc"></div></li><li><code>cellIndex</code> : Number<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-cellcontextmenu" href="Ext.grid.Grid.html#event-cellcontextmenu">Grid</a>.</div>
                </div>
                            <a name="event-celldblclick"></a>
                <div class="mdetail alt">
                <h3>celldblclick</i></h3>
                <code>public event celldblclick</code>
                <div class="mdetail-desc">
                Fires when a cell is double clicked
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc"></div></li><li><code>columnIndex</code> : Number<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-celldblclick" href="Ext.grid.Grid.html#event-celldblclick">Grid</a>.</div>
                </div>
                            <a name="event-click"></a>
                <div class="mdetail">
                <h3>click</i></h3>
                <code>public event click</code>
                <div class="mdetail-desc">
                The raw click event for the entire grid.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-click" href="Ext.grid.Grid.html#event-click">Grid</a>.</div>
                </div>
                            <a name="event-columnmove"></a>
                <div class="mdetail alt">
                <h3>columnmove</i></h3>
                <code>public event columnmove</code>
                <div class="mdetail-desc">
                Fires when the user moves a column
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>oldIndex</code> : Number<div class="sub-desc"></div></li><li><code>newIndex</code> : Number<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-columnmove" href="Ext.grid.Grid.html#event-columnmove">Grid</a>.</div>
                </div>
                            <a name="event-columnresize"></a>
                <div class="mdetail">
                <h3>columnresize</i></h3>
                <code>public event columnresize</code>
                <div class="mdetail-desc">
                Fires when the user resizes a column
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>columnIndex</code> : Number<div class="sub-desc"></div></li><li><code>newSize</code> : Number<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-columnresize" href="Ext.grid.Grid.html#event-columnresize">Grid</a>.</div>
                </div>
                            <a name="event-contextmenu"></a>
                <div class="mdetail alt">
                <h3>contextmenu</i></h3>
                <code>public event contextmenu</code>
                <div class="mdetail-desc">
                The raw contextmenu event for the entire grid.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-contextmenu" href="Ext.grid.Grid.html#event-contextmenu">Grid</a>.</div>
                </div>
                            <a name="event-dblclick"></a>
                <div class="mdetail">
                <h3>dblclick</i></h3>
                <code>public event dblclick</code>
                <div class="mdetail-desc">
                The raw dblclick event for the entire grid.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-dblclick" href="Ext.grid.Grid.html#event-dblclick">Grid</a>.</div>
                </div>
                            <a name="event-dragdrop"></a>
                <div class="mdetail alt">
                <h3>dragdrop</i></h3>
                <code>public event dragdrop</code>
                <div class="mdetail-desc">
                Fires when dragged row(s) are dropped on a valid DD target
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>dd</code> : Ext.GridDD<div class="sub-desc">The drag drop object</div></li><li><code>targetId</code> : String<div class="sub-desc">The target drag drop object</div></li><li><code>e</code> : event<div class="sub-desc">The raw browser event</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-dragdrop" href="Ext.grid.Grid.html#event-dragdrop">Grid</a>.</div>
                </div>
                            <a name="event-dragenter"></a>
                <div class="mdetail">
                <h3>dragenter</i></h3>
                <code>public event dragenter</code>
                <div class="mdetail-desc">
                Fires when the dragged row(s) first cross another DD target while being dragged
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>dd</code> : Ext.GridDD<div class="sub-desc">The drag drop object</div></li><li><code>targetId</code> : String<div class="sub-desc">The target drag drop object</div></li><li><code>e</code> : event<div class="sub-desc">The raw browser event</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-dragenter" href="Ext.grid.Grid.html#event-dragenter">Grid</a>.</div>
                </div>
                            <a name="event-dragout"></a>
                <div class="mdetail alt">
                <h3>dragout</i></h3>
                <code>public event dragout</code>
                <div class="mdetail-desc">
                Fires when the dragged row(s) leave another DD target while being dragged
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>dd</code> : Ext.GridDD<div class="sub-desc">The drag drop object</div></li><li><code>targetId</code> : String<div class="sub-desc">The target drag drop object</div></li><li><code>e</code> : event<div class="sub-desc">The raw browser event</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-dragout" href="Ext.grid.Grid.html#event-dragout">Grid</a>.</div>
                </div>
                            <a name="event-dragover"></a>
                <div class="mdetail">
                <h3>dragover</i></h3>
                <code>public event dragover</code>
                <div class="mdetail-desc">
                Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>dd</code> : Ext.GridDD<div class="sub-desc">The drag drop object</div></li><li><code>targetId</code> : String<div class="sub-desc">The target drag drop object</div></li><li><code>e</code> : event<div class="sub-desc">The raw browser event</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-dragover" href="Ext.grid.Grid.html#event-dragover">Grid</a>.</div>
                </div>
                            <a name="event-enddrag"></a>
                <div class="mdetail alt">
                <h3>enddrag</i></h3>
                <code>public event enddrag</code>
                <div class="mdetail-desc">
                Fires when a drag operation is complete
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>dd</code> : Ext.GridDD<div class="sub-desc">The drag drop object</div></li><li><code>e</code> : event<div class="sub-desc">The raw browser event</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-enddrag" href="Ext.grid.Grid.html#event-enddrag">Grid</a>.</div>
                </div>
                            <a name="event-headerclick"></a>
                <div class="mdetail">
                <h3>headerclick</i></h3>
                <code>public event headerclick</code>
                <div class="mdetail-desc">
                Fires when a header is clicked
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>columnIndex</code> : Number<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-headerclick" href="Ext.grid.Grid.html#event-headerclick">Grid</a>.</div>
                </div>
                            <a name="event-headercontextmenu"></a>
                <div class="mdetail alt">
                <h3>headercontextmenu</i></h3>
                <code>public event headercontextmenu</code>
                <div class="mdetail-desc">
                Fires when a header is right clicked
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>columnIndex</code> : Number<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-headercontextmenu" href="Ext.grid.Grid.html#event-headercontextmenu">Grid</a>.</div>
                </div>
                            <a name="event-headerdblclick"></a>
                <div class="mdetail">
                <h3>headerdblclick</i></h3>
                <code>public event headerdblclick</code>
                <div class="mdetail-desc">
                Fires when a header cell is double clicked
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>columnIndex</code> : Number<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-headerdblclick" href="Ext.grid.Grid.html#event-headerdblclick">Grid</a>.</div>
                </div>
                            <a name="event-keydown"></a>
                <div class="mdetail alt">
                <h3>keydown</i></h3>
                <code>public event keydown</code>
                <div class="mdetail-desc">
                The raw keydown event for the entire grid.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-keydown" href="Ext.grid.Grid.html#event-keydown">Grid</a>.</div>
                </div>
                            <a name="event-keypress"></a>
                <div class="mdetail">
                <h3>keypress</i></h3>
                <code>public event keypress</code>
                <div class="mdetail-desc">
                The raw keypress event for the entire grid.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-keypress" href="Ext.grid.Grid.html#event-keypress">Grid</a>.</div>
                </div>
                            <a name="event-mousedown"></a>
                <div class="mdetail alt">
                <h3>mousedown</i></h3>
                <code>public event mousedown</code>
                <div class="mdetail-desc">
                The raw mousedown event for the entire grid.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-mousedown" href="Ext.grid.Grid.html#event-mousedown">Grid</a>.</div>
                </div>
                            <a name="event-mouseout"></a>
                <div class="mdetail">
                <h3>mouseout</i></h3>
                <code>public event mouseout</code>
                <div class="mdetail-desc">
                The raw mouseout event for the entire grid.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-mouseout" href="Ext.grid.Grid.html#event-mouseout">Grid</a>.</div>
                </div>
                            <a name="event-mouseover"></a>
                <div class="mdetail alt">
                <h3>mouseover</i></h3>
                <code>public event mouseover</code>
                <div class="mdetail-desc">
                The raw mouseover event for the entire grid.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-mouseover" href="Ext.grid.Grid.html#event-mouseover">Grid</a>.</div>
                </div>
                            <a name="event-mouseup"></a>
                <div class="mdetail">
                <h3>mouseup</i></h3>
                <code>public event mouseup</code>
                <div class="mdetail-desc">
                The raw mouseup event for the entire grid.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-mouseup" href="Ext.grid.Grid.html#event-mouseup">Grid</a>.</div>
                </div>
                            <a name="event-render"></a>
                <div class="mdetail alt">
                <h3>render</i></h3>
                <code>public event render</code>
                <div class="mdetail-desc">
                Fires when the grid is rendered
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>grid</code> : Grid<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-render" href="Ext.grid.Grid.html#event-render">Grid</a>.</div>
                </div>
                            <a name="event-rowclick"></a>
                <div class="mdetail">
                <h3>rowclick</i></h3>
                <code>public event rowclick</code>
                <div class="mdetail-desc">
                Fires when a row is clicked
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-rowclick" href="Ext.grid.Grid.html#event-rowclick">Grid</a>.</div>
                </div>
                            <a name="event-rowcontextmenu"></a>
                <div class="mdetail alt">
                <h3>rowcontextmenu</i></h3>
                <code>public event rowcontextmenu</code>
                <div class="mdetail-desc">
                Fires when a row is right clicked
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-rowcontextmenu" href="Ext.grid.Grid.html#event-rowcontextmenu">Grid</a>.</div>
                </div>
                            <a name="event-rowdblclick"></a>
                <div class="mdetail">
                <h3>rowdblclick</i></h3>
                <code>public event rowdblclick</code>
                <div class="mdetail-desc">
                Fires when a row is double clicked
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-rowdblclick" href="Ext.grid.Grid.html#event-rowdblclick">Grid</a>.</div>
                </div>
                            <a name="event-startdrag"></a>
                <div class="mdetail alt">
                <h3>startdrag</i></h3>
                <code>public event startdrag</code>
                <div class="mdetail-desc">
                Fires when row(s) start being dragged
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Grid<div class="sub-desc"></div></li><li><code>dd</code> : Ext.GridDD<div class="sub-desc">The drag drop object</div></li><li><code>e</code> : event<div class="sub-desc">The raw browser event</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.grid.Grid" ext:member="#event-startdrag" href="Ext.grid.Grid.html#event-startdrag">Grid</a>.</div>
                </div>
                            <a name="event-validateedit"></a>
                <div class="mdetail">
                <h3>validateedit</i></h3>
                <code>public event validateedit</code>
                <div class="mdetail-desc">
                Fires after a cell is edited, but before the value is set in the record. Return false
to cancel the change. The edit event object has the following properties <br />
<ul style="padding:5px;padding-left:16px;">
<li>grid - This grid</li>
<li>record - The record being edited</li>
<li>field - The field name being edited</li>
<li>value - The value being set</li>
<li>originalValue - The original value for the field, before the edit.</li>
<li>row - The grid row index</li>
<li>column - The grid column index</li>
<li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
</ul>
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>e</code> : Object<div class="sub-desc">An edit event (see above for description)</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by EditorGrid.</div>
                </div>
                        </div>
                            <h2 class="mdetail-head">Config Details</h2>
            <div class="detail-wrap">
                            <a name="config-autoExpandColumn"></a>
                <div class="mdetail">
                <h3>autoExpandColumn</i></h3>
                <code>autoExpandColumn : String</code>
                <div class="mdetail-desc">
                    The id of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#autoExpandColumn" href="Ext.grid.Grid.html#autoExpandColumn">Grid</a>.</div>
                </div>
                            <a name="config-autoExpandMax"></a>
                <div class="mdetail alt">
                <h3>autoExpandMax</i></h3>
                <code>autoExpandMax : Number</code>
                <div class="mdetail-desc">
                    The maximum width the autoExpandColumn can have (if enabled). Default is 1000.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#autoExpandMax" href="Ext.grid.Grid.html#autoExpandMax">Grid</a>.</div>
                </div>
                            <a name="config-autoExpandMin"></a>
                <div class="mdetail">
                <h3>autoExpandMin</i></h3>
                <code>autoExpandMin : Number</code>
                <div class="mdetail-desc">
                    The minimum width the autoExpandColumn can have (if enabled). Default is 50.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#autoExpandMin" href="Ext.grid.Grid.html#autoExpandMin">Grid</a>.</div>
                </div>
                            <a name="config-autoHeight"></a>
                <div class="mdetail alt">
                <h3>autoHeight</i></h3>
                <code>autoHeight : Boolean</code>
                <div class="mdetail-desc">
                    True to fit the height of the grid container to the height of the data. Default is false.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#autoHeight" href="Ext.grid.Grid.html#autoHeight">Grid</a>.</div>
                </div>
                            <a name="config-autoSizeColumns"></a>
                <div class="mdetail">
                <h3>autoSizeColumns</i></h3>
                <code>autoSizeColumns : Boolean</code>
                <div class="mdetail-desc">
                    True to automatically resize the columns to fit their content <b>on initial render.</b> It is more efficient to explicitly size the columns through the ColumnModel's <a ext:cls="Ext.grid.ColumnModel" ext:member="width" href="Ext.grid.ColumnModel.html#width">Ext.grid.ColumnModel.width</a> config option. Default is false.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#autoSizeColumns" href="Ext.grid.Grid.html#autoSizeColumns">Grid</a>.</div>
                </div>
                            <a name="config-autoSizeHeaders"></a>
                <div class="mdetail alt">
                <h3>autoSizeHeaders</i></h3>
                <code>autoSizeHeaders : Boolean</code>
                <div class="mdetail-desc">
                    True to measure headers with column data when auto sizing columns. Default is true.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#autoSizeHeaders" href="Ext.grid.Grid.html#autoSizeHeaders">Grid</a>.</div>
                </div>
                            <a name="config-autoWidth"></a>
                <div class="mdetail">
                <h3>autoWidth</i></h3>
                <code>autoWidth : Boolean</code>
                <div class="mdetail-desc">
                    True to set the grid's width to the default total width of the grid's columns instead of a fixed width. Default is false.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#autoWidth" href="Ext.grid.Grid.html#autoWidth">Grid</a>.</div>
                </div>
                            <a name="config-clicksToEdit"></a>
                <div class="mdetail alt">
                <h3>clicksToEdit</i></h3>
                <code>clicksToEdit : Number</code>
                <div class="mdetail-desc">
                    The number of clicks on a cell required to display the cell's editor (defaults to 2)                </div>
                <div class="mdetail-def">This config option is defined by EditorGrid.</div>
                </div>
                            <a name="config-enableColumnHide"></a>
                <div class="mdetail">
                <h3>enableColumnHide</i></h3>
                <code>enableColumnHide : Boolean</code>
                <div class="mdetail-desc">
                    True to enable hiding of columns with the header context menu. Default is true.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#enableColumnHide" href="Ext.grid.Grid.html#enableColumnHide">Grid</a>.</div>
                </div>
                            <a name="config-enableColumnMove"></a>
                <div class="mdetail alt">
                <h3>enableColumnMove</i></h3>
                <code>enableColumnMove : Boolean</code>
                <div class="mdetail-desc">
                    True to enable drag and drop reorder of columns. Default is true.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#enableColumnMove" href="Ext.grid.Grid.html#enableColumnMove">Grid</a>.</div>
                </div>
                            <a name="config-enableDragDrop"></a>
                <div class="mdetail">
                <h3>enableDragDrop</i></h3>
                <code>enableDragDrop : Boolean</code>
                <div class="mdetail-desc">
                    True to enable drag and drop of rows. Default is false.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#enableDragDrop" href="Ext.grid.Grid.html#enableDragDrop">Grid</a>.</div>
                </div>
                            <a name="config-enableRowHeightSync"></a>
                <div class="mdetail alt">
                <h3>enableRowHeightSync</i></h3>
                <code>enableRowHeightSync : Boolean</code>
                <div class="mdetail-desc">
                    True to manually sync row heights across locked and not locked rows. Default is false.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#enableRowHeightSync" href="Ext.grid.Grid.html#enableRowHeightSync">Grid</a>.</div>
                </div>
                            <a name="config-loadMask"></a>
                <div class="mdetail">
                <h3>loadMask</i></h3>
                <code>loadMask : Object</code>
                <div class="mdetail-desc">
                    An <a ext:cls="Ext.LoadMask" href="Ext.LoadMask.html">Ext.LoadMask</a> config or true to mask the grid while loading. Default is false.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#loadMask" href="Ext.grid.Grid.html#loadMask">Grid</a>.</div>
                </div>
                            <a name="config-maxHeight"></a>
                <div class="mdetail alt">
                <h3>maxHeight</i></h3>
                <code>maxHeight : Number</code>
                <div class="mdetail-desc">
                    Sets the maximum height of the grid - ignored if autoHeight is not on.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#maxHeight" href="Ext.grid.Grid.html#maxHeight">Grid</a>.</div>
                </div>
                            <a name="config-maxRowsToMeasure"></a>
                <div class="mdetail">
                <h3>maxRowsToMeasure</i></h3>
                <code>maxRowsToMeasure : Boolean</code>
                <div class="mdetail-desc">
                    If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of rows measured to get a columns size. Default is 0 (all rows).                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#maxRowsToMeasure" href="Ext.grid.Grid.html#maxRowsToMeasure">Grid</a>.</div>
                </div>
                            <a name="config-minColumnWidth"></a>
                <div class="mdetail alt">
                <h3>minColumnWidth</i></h3>
                <code>minColumnWidth : Number</code>
                <div class="mdetail-desc">
                    The minimum width a column can be resized to. Default is 25.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#minColumnWidth" href="Ext.grid.Grid.html#minColumnWidth">Grid</a>.</div>
                </div>
                            <a name="config-monitorWindowResize"></a>
                <div class="mdetail">
                <h3>monitorWindowResize</i></h3>
                <code>monitorWindowResize : Boolean</code>
                <div class="mdetail-desc">
                    True to autoSize the grid when the window resizes. Default is true.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#monitorWindowResize" href="Ext.grid.Grid.html#monitorWindowResize">Grid</a>.</div>
                </div>
                            <a name="config-stripeRows"></a>
                <div class="mdetail alt">
                <h3>stripeRows</i></h3>
                <code>stripeRows : Boolean</code>
                <div class="mdetail-desc">
                    True to stripe the rows. Default is true.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#stripeRows" href="Ext.grid.Grid.html#stripeRows">Grid</a>.</div>
                </div>
                            <a name="config-trackMouseOver"></a>
                <div class="mdetail">
                <h3>trackMouseOver</i></h3>
                <code>trackMouseOver : Boolean</code>
                <div class="mdetail-desc">
                    True to highlight rows when the mouse is over. Default is true.                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#trackMouseOver" href="Ext.grid.Grid.html#trackMouseOver">Grid</a>.</div>
                </div>
                            <a name="config-view"></a>
                <div class="mdetail alt">
                <h3>view</i></h3>
                <code>view : Object</code>
                <div class="mdetail-desc">
                    The <a ext:cls="Ext.grid.GridView" href="Ext.grid.GridView.html">Ext.grid.GridView</a> used by the grid. This can be set before a call to render().                </div>
                <div class="mdetail-def">This config option is defined by <a ext:cls="Ext.grid.Grid" ext:member="#view" href="Ext.grid.Grid.html#view">Grid</a>.</div>
                </div>
                        </div>
        
        </div>
    <hr>
    <div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>

    </body>
</html>